<template>
  <div class="detail">
    <cusDialog title="留样详情" ref="dialog" width="700px" headCss="float:left;" :showConfrim="false" :showCancle="false"
      @hideHandler="hideHandler">

      <div class="imgBox flex ">
        <div class="flex-1 ">
          <p class="tit flex">
            开门
            <span>{{ detailInfo.gmtOpenDoor }}</span>
          </p>
          <el-image :src="detailInfo.openUrl" :zoom-rate="1.2" :preview-src-list="[detailInfo.openUrl]"
            :initial-index="4" class="originalImg" hide-on-click-modal />
        </div>
        <div class="flex-1 ">
          <p class="tit flex">
            关门
            <span>{{ detailInfo.gmtCloseDoor }}</span>
          </p>
          <el-image :src="detailInfo.closeUrl" :zoom-rate="1.2" :preview-src-list="[detailInfo.closeUrl]"
            :initial-index="4" class="originalImg" hide-on-click-modal />
        </div>
      </div>
      <div>
        <p class="tit1">留样时长
          <span>
            {{ formatSeconds }}
          </span>
          <span class="videoclass">视频切换: &nbsp
          <el-select
            v-model="videoData.value"
            placeholder="Select"
            size="small"
            style="width: 240px"
            placement="top-end"
            @change="setUrlviedo"
            >
          <el-option
           v-for="item in videoData.videolist"
           :key="item"
           :label="getLastPart(item)"
           :value="item" />
          </el-select></span>
        </p>
        <div>
          <videoPlayer :height="220" :src="videoData.value" ref="videoRef"></videoPlayer>
        </div>
      </div>
      <div>
        <p class=" tit">留样菜品</p>
        <div class="dishesInfoBox ">
          <div class=" flex flex-justify-between">
            <p class="infoItem ">留样人 :<span>{{ detailInfo.operator }}</span>
            </p>
            <p class="infoItem ">位置 :<span>{{ detailInfo.num }}</span>
            </p>
            <p class="infoItem ">餐段 :<span>{{ detailInfo.mealSegmentName }}</span>
            </p>
          </div>
          <div class="dishesBox">
            <el-tag type="primary" v-for="(item, index) in detailInfo.dishList" class="dishesItem" :key="index">{{
      item.dishName }}</el-tag>
          </div>

        </div>
      </div>

    </cusDialog>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { reqLedgerDetail } from '@/api/business/device';

const router = useRouter();
const videoRef = ref(null)
const videoData = reactive({
  value:'',
  videolist:[]
})

const dialog = ref(null)
const show = (id) => {
  dialog.value.show = true;
  getDetailInfo(id)

};

onMounted(() => {
})
const detailInfo = ref({})

const getDetailInfo = (id) => {
  reqLedgerDetail({ keepCountId: id }).then(res => {
    if (res.code == 1) {
      detailInfo.value = res.data
      // 获取后端发送过来的数据因为是字符串,拼接 所以切割成数组
      videoData.videolist = detailInfo.value.videoUrl.split(',')
      // 默认播放第一个URL链接
      videoData.value = videoData.videolist[0]?videoData.videolist[0]:''
    }
  })
};

const hideHandler = () => {
  videoRef.value.backStart()
}

const formatSeconds = computed(() => {
  let theTime = parseInt(detailInfo.value.takeTime) // 秒
  let theTime1 = 0 // 分
  let theTime2 = 0 // 小时
  if (theTime > 60) {
    theTime1 = parseInt(theTime / 60)
    theTime = parseInt(theTime % 60)
    if (theTime1 > 60) {
      theTime2 = parseInt(theTime1 / 60)
      theTime1 = parseInt(theTime1 % 60)
    }
  }
  let result = '' + parseInt(theTime) + '秒'
  if (theTime1 > 0) {
    result = '' + parseInt(theTime1) + '分' + result
  }
  if (theTime2 > 0) {
    result = '' + parseInt(theTime2) + '小时' + result
  }
  return result || ''
})
const setUrlviedo = (e) =>{
  console.log(e)
}


defineExpose({ show })

// 只显示最后一个/后面得视频文件名称
const getLastPart = (str:string= '') => {
      const parts = str.split('/');
      return parts.pop() || parts.pop(); // 确保在空字符串时返回正确的结果
    }
</script>
<style lang="scss">
.detail{
  .el-select__placeholder{
    text-align: center;
  }
}

</style>
<style lang="scss" scoped>
.originalImg {
  // flex: 1;
  width: 95%;
  height: 168px;
}
.tit {
  //styleName: 中文简体SB/H8;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #111111;
  margin: 10px;
}
.tit1{
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #111111;
  margin: 10px;
  display: flex;
   align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐，但这里需要微调 */
  .tit1 > span:first-of-type {
  /* 第一个 span 元素（显示时间） */
  flex: 1; /* 占据剩余空间，但这里由于有第二个 span 的固定宽度，实际上不会占满 */
  text-align: left; /* 确保文本左对齐（虽然默认就是） */
}
 
.videoclass {
  display: flex; /* 使其内部的元素（文本和选择器）也使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  margin-left: auto; /* 自动外边距，将自身推向右侧 */
}
}

span {
  //styleName: 中文简体R/H8;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #969799;
  padding: 0 8px;

}

.dishesInfoBox {
  padding: 0 15px;

  p {
    font-size: 16px;
    line-height: 24px;
    color: #111111;
  }

  .dishesBox {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    max-height: 200px;
    margin: 10px 0;
  }

  .dishesItem {
    margin: 0 18px 8px 0;
    white-space: nowrap;
    color: #3d7fe9;
    cursor: pointer;
  }
}
</style>